Bootstrap Snippet Bootstrap Material Wizard using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Material Bootstrap Wizard by Creative Tim</title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
</head>
<body>
    <div class="image-container set-full-height" style="background-image: url('http://demos.creative-tim.com/material-bootstrap-wizard/assets/img/wizard-book.jpg')">
    <!--  Made With Material Kit  -->
        <a href="http://demos.creative-tim.com/material-kit/index.html?ref=material-bootstrap-wizard" class="made-with-mk" target="_blank">
            <div class="brand">MK</div>
            <div class="made-with">Made with <strong>Material Kit</strong></div>
        </a>
        <!--   Big container   -->
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                    <!-- Wizard container -->
                    <div class="wizard-container">
                        <div class="card wizard-card" data-color="red" id="wizard">
                            <form action="" method="">
                        <!--        You can switch " data-color="blue" "  with one of the next bright colors: "green", "orange", "red", "purple"             -->
                                <div class="wizard-header">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  background-color: #E5E5E5;
  color: #3C4858;
}
body.inverse {
  background: #333333;
}
body.inverse, body.inverse .form-control {
  color: #ffffff;
}
body.inverse .modal,
body.inverse .modal .form-control,
body.inverse .panel-default,
body.inverse .panel-default .form-control,
body.inverse .card,
body.inverse .card .form-control {
  background-color: initial;
  color: initial;
}
blockquote p {
  font-style: italic;
}
.life-of-material-kit {
  background: #FFFFFF;
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  line-height: 1.5em;
}
.serif-font {
  font-family: "Roboto Slab", "Times New Roman", serif;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
;(function($) {
var bootstrapWizardCreate = function(element, options) {
    var element = $(element);
    var obj = this;
    // selector skips any 'li' elements that do not contain a child with a tab data-toggle
    var baseItemSelector = 'li:has([data-toggle="tab"])';
    // Merge options with defaults
    var $settings = $.extend({}, $.fn.bootstrapWizard.defaults, options);
    var $activeTab = null;
    var $navigation = null;
    this.rebindClick = function(selector, fn)
    {
        selector.unbind('click', fn).bind('click', fn);
    }
    this.fixNavigationButtons = function() {
        // Get the current active tab
        if(!$activeTab.length) {
            // Select first one
            $navigation.find('a:first').tab('show');
            $activeTab = $navigation.find(baseItemSelector + ':first');
        }
        // See if we're currently in the first/last then disable the previous and last buttons
        $($settings.previousSelector, element).toggleClass('disabled', (obj.firstIndex() >= obj.currentIndex()));
        $($settings.nextSelector, element).toggleClass('disabled', (obj.currentIndex() >= obj.navigationLength()));
        // We are unbinding and rebinding to ensure single firing and no double-click errors
        obj.rebindClick($($settings.nextSelector, element), obj.next);
        obj.rebindClick($($settings.previousSelector, element), obj.previous);
        obj.rebindClick($($settings.lastSelector, element), obj.last);
        obj.rebindClick($($settings.firstSelector, element), obj.first);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Material Wizard"
Bootstrap 3.3.0 Snippet by Trends WD

Related: See More

Questions / Comments:

"Bootstrap Material Wizard" Bootstrap 3.3.0 Snippet by Trends WD

Related: See More

Questions / Comments:

"Bootstrap Material Wizard"
Bootstrap 3.3.0 Snippet by Trends WD